<template>
<div class="app-container">
     <el-card>
        <div slot="header" class="clearfix">
                <span>搜索条件</span>
        </div>
        <div class="filter-container">
            <div style="display:flex;align-items:center">
                <p style="font-size:14px;margin-right:10px">订单状态</p>
                <el-button :type="status === item.value ? 'primary' : ''" v-for="item in statusList" :key="item.name" @click="setwhere(item,1)" size="mini">{{item.name}}</el-button>
            </div>
            
            <div style="display:flex;align-items:center">
                <p style="font-size:14px;margin-right:10px">创建时间</p>
                <el-button :type="data == item.value ? 'primary' : ''" v-for="item in dataList" :key="item.name" @click="setwhere(item,3)" size="mini">{{item.name}}</el-button>
                <el-button size="mini" ref="time"  @click="setwhere({value:'zd',is_zd:true},3)" :type="data == 'zd'? 'primary' : ''">自定义</el-button>
                <el-date-picker 
                    v-model="data"
                    style="margin-left:10px"
                    v-show="showtime==true"
                    type="daterange"
                    size="mini"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                 </el-date-picker>
            </div>
            <div style="margin-top:25px">
                 <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" size="mini" @click="search">
                {{ '搜索' }}
            </el-button>
              <el-button v-waves  class="filter-item" type="info" icon="el-icon-refresh-left" size="mini" @click="refresh">
                {{ '重置' }}
            </el-button>
            </div>
            
        </div>
     </el-card>
     <el-row :gutter="20" style="margin-top:20px;font-size:14px">
        <el-col :span="item.col!=undefined ? item.col : 6" v-for="item in badge" :key="item.name">
            <el-card class="box-card">
                <div slot="header">
                    <span>{{item.name}}</span>
                    <el-button style="float: right; padding: 3px 0" type="text">{{item.field}}</el-button>
                </div>
                <div>
                     <span>{{item.count}}</span>
                     <p v-if="item.content!=undefined"  style="display:flex;justify-content:space-between">
                        {{item.content}}
                        <span>{{item.sum}}<i :class="item.class"></i></span>
                    </p>
                </div>
              
            </el-card>
    </el-col>
    </el-row>
     <el-card style="margin-top:20px">
        <div slot="header" class="clearfix">
                <span>图表展示</span>
        </div>
        <div class="filter-container" ref="echarts_list" style="width:100%;height:450px">
            
        </div>
     </el-card>    
</div>
 
</template>

<script>
import waves from '@/directive/waves' // waves directive
import permission from '@/directive/permission/index.js' // 权限判断指令
import checkPermission from '@/utils/permission' // 权限判断函数
import * as echarts from 'echarts'
import {order_chart} from '@/api/record' // api接口
require('echarts/theme/macarons') // echarts theme
export default{
    name: 'chart_order',
     directives: { waves, permission }, // 引入指令
    data() {
        return {
               option:{},
                badge:[],
                statusList:[
                    {name:'全部',value:''},
                    {name:'待付款',value:0},
                    {name:'待发货',value:1},
                    {name:'待收货',value:2},
                    {name:'已收货',value:3},
                    {name:'已评价',value:7}
                ],
                dataList:[
                    {name:'全部',value:''},
                    {name:'今天',value:'today'},
                    {name:'昨天',value:'yesterday'},
                    {name:'本周',value:'week'},
                    {name:'本月',value:'month'},
                    {name:'本季度',value:'quarter'},
                    {name:'本年',value:'year'},
                ],
               
            
                status:'',
                type:'',
                data:'',
                vip:0,
                title:'全部商品',
                myChart:{},
                showtime:false,
        }
    },
    methods:{
        search:function(){
                    this.info();
                },
        refresh:function () {
            this.status='';
            this.type='';
            this.data='';
            this.info();
        },
        info:function(){
            var that=this;
            order_chart({type:that.type,status:that.status,data:that.data}).then(res=>{
                console.log(res);
                that.badge=res.data.badge;
              
                this.setChart(this.$refs.echarts_list,'list');
                  var option=that.setoption(res.data.seriesdata,res.data.xdata,res.data.legend,'','lines',res.data.zoom);
                that.myChart.list.setOption(option);
            })
    
    },
    setoption:function(seriesdata,xdata,legend,title,type,Zoom){
                    var _type=type || 'line';
                    var _title=title || '订单数据统计图';
                    switch (_type){
                        case 'line':
                            this.option={
                                title: {text:_title,x:'center'},
                                xAxis : [{type : 'category', data :xdata,}],
                                yAxis : [{type : 'value'}],
                                series:[{type:_type,data:seriesdata,markPoint :{
                                        data : [
                                            {type : 'max', name: '最大值'},
                                            {type : 'min', name: '最小值'}
                                        ]
                                    },
                                    itemStyle:{
                                        color:'#81BCFF'
                                    }
                                }
                                ],
                            };
                            if(legend!=undefined || legend!=null){
                                this.option.legend={left:'center',data:legend};
                            }
                            break;
                        case 'lines':
                            this.option={
                                tooltip: {show: true},
                                title: {text:_title,x:'center'},
                                xAxis : [{type : 'category', data :xdata,}],
                                yAxis : [{type : 'value'}],
                                series:seriesdata,
                            };
                            if(legend!=undefined || legend!=null){
                                this.option.legend={left:'left',data:legend};
                            }
                            break;
                        case 'pic':
                            this.option={
                                title: {text:_title,left:'center'},
                                legend: {data:xdata,bottom:10,left:'center'},
                                tooltip: {trigger: 'item'},
                                series:[{ type: 'pie', radius : '65%', center: ['50%', '50%'], selectedMode: 'single',data:seriesdata}],
                            };
                            break;
                    }
                    this.option.grid = {
                        x: 50,x2: 40,y: 60,y2: 50
                    };
                    if(Zoom!='' && Zoom!=undefined){
                        this.option.dataZoom=[{startValue:Zoom},{type:'inside'}];
                    }
                    return  this.option;
                },
        setwhere:function(item,type){
                switch (type){
                    case 1:
                        this.status=item.value;
                        break;
                    case 2:
                        this.type=item.value;
                        break;
                    case 3:
                        if(item.is_zd==true){
                            this.showtime=true;
                            this.data=this.$refs.date_time.innerText;
                        }else{
                            this.showtime=false;
                            this.data=item.value;
                        }
                        break;
                }
            },
         checkPermission, // 权限判断函数
         handleFilter() { // 查询
                // this.listQuery.page = 1
                // this.getList()
        },
         setChart:function(name,myChartname){
            this.myChart[myChartname]=echarts.init(name);
        },
        
    },
      mounted:function () {
                this.info();
            }
}

</script>
